/* ===== 导入依赖 ===== */
@import 'tailwindcss';
@plugin "@tailwindcss/typography";
@plugin "@iconify/tailwind4";

/* ===== 暗色模式配置 ===== */
@custom-variant dark (&:where(.dark, .dark *));

/* ===== 主题变量 ===== */
@theme {
  /* 字体系统 */
  --font-serif: var(--font-lexend);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-geist-mono);

  /* 颜色系统 */
  --color-border: hsl(var(--border));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-tag-bg: hsl(var(--tag-bg));
  --color-tag-bg-hover: hsl(var(--tag-bg-hover));
  --color-tag-border: hsl(var(--tag-border));
  --color-tag-text: hsl(var(--tag-text));
  --color-scrollbar: hsl(var(--scrollbar));
  --color-scrollbar-bg: hsl(var(--scrollbar-bg));
}

/* ===== 字体配置 ===== */
@layer base {
  /* 数字字体 */
  @font-face {
    font-family: 'Numbers';
    src: url('/fonts/GeistVF.woff2') format('woff2');
    font-display: swap;
  }

  /* 破折号字体 */
  @font-face {
    font-family: 'CJKEmDash';
    unicode-range: U+2014, U+2E3A-2E3B;
    src: url('/fonts/ZhudouSansVF-subset.woff2') format('woff2');
    font-display: swap;
  }

  /* 标题字体 */
  @font-face {
    font-family: 'Lexend';
    src: url('/fonts/Lexend-VariableFont_wght.woff2') format('woff2');
    font-display: swap;
  }

  /* 等宽字体 */
  @font-face {
    font-family: 'GeistMono';
    src: url('/fonts/GeistMono.woff2') format('woff2');
    font-display: swap;
  }
}

/* ===== 颜色变量 ===== */
@layer base {
  :root {
    /* 字体族 */
    --font-lexend: 'Lexend', 'CJKEmDash', 'Numbers', 'ShangguSansSC-VF', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'CJKEmDash', 'Numbers', 'ShangguSansSC-VF', ui-sans-serif, system-ui, sans-serif;
    --font-geist-mono: 'GeistMono', 'Input Mono', 'Fira Code', 'ShangguSansSC-VF', monospace;

    /* 基础色调 */
    --background: 255 100% 100%;
    --foreground: 225 15% 12%;

    /* 交互状态 */
    --accent: 220 25% 94%;
    --accent-foreground: 225 15% 12%;

    /* 主要强调色 */
    --primary: 225 15% 12%;
    --primary-foreground: 220 30% 98%;

    /* 弱化元素 */
    --muted: 220 25% 92%;
    --muted-foreground: 225 10% 40%;
    --border: 220 20% 90%;
    --ring: 225 15% 12%;

    /* 标签系统 */
    --tag-bg: 220 25% 96%;
    --tag-bg-hover: 220 25% 92%;
    --tag-border: 220 25% 90%;
    --tag-text: 225 15% 35%;

    /* 滚动条 */
    --scrollbar: 220 20% 80%;
    --scrollbar-bg: 220 25% 95%;

    /* 布局宽度变量 */
    --layout-width: 48rem;
    --layout-half-width: calc(var(--layout-width) / 2);
    --layout-change-width: 136rem;
  }

  @media (min-width: 136rem) {
    :root {
      --layout-width: 56rem;
    }
  }

  /* 全局布局宽度工具类 */
  .global-layout-width {
    max-width: var(--layout-width);
  }

  /* 暗色模式变量 */
  .dark {
    --background: 240 10% 4%;
    --foreground: 0 0% 98%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --border: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --tag-bg: 240 20% 13%;
    --tag-bg-hover: 240 20% 16%;
    --tag-border: 240 20% 20%;
    --tag-text: 240 15% 85%;
    --scrollbar: 240 10% 30%;
    --scrollbar-bg: 240 10% 15%;
  }
}

/* ===== 基础样式 ===== */
@layer base {
  * {
    @apply border-border;
  }

  html {
    color-scheme: light;
    background-color: var(--color-background);
    font-family: var(--font-sans);
    scroll-behavior: smooth;
    @variant dark {
      color-scheme: dark;
    }
  }

  body {
    @apply min-h-screen bg-background text-foreground;
  }

  /* 标题样式 */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-serif font-medium;
  }

  /* 链接样式 */
  a {
    @apply underline-offset-4;
  }

  /* 工具类 */
  .pro {
    @apply prose prose-zinc dark:prose-invert;
  }
}

/* ===== 动画效果 ===== */
@layer base {
  /* 淡入上升动画 */
  .fade-up {
    opacity: 0;
    transform: translateY(2rem);
    animation: fadeUp 0.6s forwards;
    will-change: opacity, transform;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(2rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animation-delay-100 {
    animation-delay: 100ms;
  }
  .animation-delay-150 {
    animation-delay: 150ms;
  }
  .animation-delay-200 {
    animation-delay: 200ms;
  }

  /* 主题切换动画 */
  html.disable-transition,
  html.disable-transition * {
    transition: none !important;
    view-transition-name: none !important;
    --astro-view-transition: none !important;
  }
}

/* ===== 滚动条样式 ===== */
/* Firefox */
@supports (scrollbar-width: auto) {
  * {
    scrollbar-width: auto;
    scrollbar-color: hsl(var(--scrollbar)) hsl(var(--scrollbar-bg));
  }
}

/* Webkit */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar:horizontal {
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background: hsl(var(--scrollbar-bg));
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: hsl(var(--scrollbar));
  }
  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--scrollbar) / 0.8);
  }
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ===== 搜索样式 ===== */
/* 隐藏搜索框清除按钮 */
#search-input::-webkit-search-decoration,
#search-input::-webkit-search-cancel-button,
#search-input::-webkit-search-results-button,
#search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

#search-input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type='search']::-moz-search-cancel-button {
  display: none;
}

/* 搜索结果容器与条目样式（优化） */
#search-results {
  padding: 0.25rem;
}

.search-results-item {
  display: block;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid hsl(var(--border) / 0.7);
  transition:
    background-color 0.18s ease,
    transform 0.12s ease,
    color 0.18s ease;
}

/* 连续主结果之间增加轻微的垂直间距 */
.search-results-item:not(.sub-result) + .search-results-item:not(.sub-result) {
  margin-top: 0.375rem;
}
/* 子结果结束到下一个主结果的过渡间距 */
.search-results-item.sub-result + .search-results-item:not(.sub-result) {
  margin-top: 0.5rem;
}

.search-results-item:hover {
  background-color: hsl(var(--accent) / 0.6);
}

.search-results-item:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  background-color: hsl(var(--accent) / 0.7);
}

.search-results-item:active {
  transform: scale(0.997);
}

.search-results-item.sub-result {
  padding-left: 1.25rem;
  border-left: 2px solid hsl(var(--accent));
  margin-left: 0.75rem;
  font-size: 0.875rem;
  opacity: 0.9;
}

.search-results-title {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.375rem;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-results-item:hover .search-results-title {
  color: hsl(var(--primary));
}

.search-results-item.sub-result .search-results-title {
  font-weight: 500;
  font-size: 0.9375rem;
}

.search-results-excerpt {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-results-excerpt mark {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  padding: 0.1em 0.25em;
  border-radius: 0.25em;
  font-weight: 600;
}

/* 搜索面板动画 */
.search-panel-show {
  animation: searchPanelShow 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

@keyframes searchPanelShow {
  0% {
    opacity: 0;
    transform: translate(0%, -2rem);
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0);
  }
}

/* ===== 工具类 ===== */
.perspective-1000 {
  perspective: 1000px;
}

/* 时间线滑入动画 */
@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.animate-slide-down {
  animation: slide-down 0.3s ease-out forwards;
}
